<template>
  <a 
    :href="href"
    :class="[
      'group relative px-4',
      isMobile ? 'px-3' : 'py-2',
      'rounded-xl text-gray-700 font-medium transition-colors duration-200 cursor-pointer'
    ]"
    @click="onClick"
  >
    <span class="relative z-10 group-hover:text-red-500
    transition-colors duration-300">{{ title }}</span>
    <div 
      v-if="!isMobile" 
      class="absolute inset-0 bg-red-50 rounded-xl
      scale-90 opacity-0 group-hover:opacity-100 group-hover:scale-100 
      translate-all duration-300"
    ></div>
  </a>
</template>

<script>
export default {
  name: 'NavLink',
  props: {
    title: {
      type: String,
      required: true
    },
    href: {
      type: String,
      required: true
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const onClick = (event) => {
      emit('click', event)
    }
    
    return {
      onClick
    }
  }
}
</script>